import { CloseOutlined } from "@ant-design/icons"
import { Button, Card, Input, Form, message } from "antd"
import React, { useCallback, useEffect, useState } from "react"
import { ModalRef } from "../modal.context"
import { DatePicker } from "antd"
import moment from "moment"
import serviceManage from "@/services/service.manage"
import { updateExhibitioninfoParams } from "@/interfaces/params.interface"

const { RangePicker } = DatePicker

interface Props {
	id: string
}
const AddFlowpathModal: React.FC<Props & ModalRef> = props => {
	const { modalRef, id } = props
	const { TextArea } = Input
	const [form] = Form.useForm()
	const exhibitionId = location.search.split("exhibitionId=")[1]
	const [done, setDone] = useState(false)
	const [lock, setLock] = useState(false)
	const [params, getParams] = useState<updateExhibitioninfoParams>()
	const closeModal = useCallback(() => {
		modalRef.current.destroy()
	}, [])
	useEffect(() => {
		if (!!lock) {
			serviceManage["updateExhibitioninfo"](params).then(res => {
				if (res.code === 200) {
					modalRef.current.destroy()
					message.success(id ? "修改成功" : "新增成功")
				}
			})
		}
	}, [lock])
	const onFinish = useCallback(data => {
		const param = {
			...data,
			startTime: moment(new Date(data["time"][0])).format("YYYY-MM-DD HH:mm:ss"),
			endTime: moment(new Date(data["time"][1])).format("YYYY-MM-DD HH:mm:ss"),
			exhibitionId,
			id
		}

		delete param.time
		getParams(param)
		setLock(true)
	}, [])

	const [hackValue, setHackValue] = useState()
	const [value, setValue] = useState()

	const onOpenChange = (open: any) => {
		if (open) {
			setHackValue([])
		} else {
			setHackValue(undefined)
		}
	}

	useEffect(() => {
		if (id) {
			serviceManage.getExhibitioninfo({ id, exhibitionId }).then(res => {
				if (res.code === 200) {
					form.setFieldsValue({
						...res.data,
						time: [
							res.data.startTime ? moment(res.data.startTime) : null,
							res.data.endTime ? moment(res.data.endTime) : null
						]
					})
					setDone(true)
				}
			})
		} else {
			setDone(true)
		}
	}, [])
	return (
		done && (
			<Card
				style={{ width: 530 }}
				title={"编辑展会信息"}
				extra={
					<Button type="text" onClick={closeModal}>
						<CloseOutlined />
					</Button>
				}
			>
				<Form layout="horizontal" labelCol={{ span: 4 }} form={form} preserve={false} onFinish={onFinish}>
					<Form.Item label="展会名称：" name="title" rules={[{ required: true, message: "请输入名称" }]}>
						<Input />
					</Form.Item>
					<Form.Item label="展会时间：" name="time" rules={[{ required: true, message: "请选择展会时间" }]}>
						<RangePicker
							value={hackValue || value}
							onChange={val => setValue(val)}
							onOpenChange={onOpenChange}
							showTime
						/>
					</Form.Item>
					<Form.Item label="展会地点：" name="address" rules={[{ required: true, message: "请输入展会地点" }]}>
						<TextArea showCount maxLength={50} />
					</Form.Item>
					<Form.Item label="展会介绍：" name="remarks" rules={[{ required: true, message: "请输入展会介绍" }]}>
						<TextArea showCount maxLength={150} />
					</Form.Item>

					<Form.Item style={{ textAlign: "right" }}>
						<Button type="primary" htmlType="submit">
							保存
						</Button>
						<Button style={{ marginLeft: 10 }} htmlType="button" onClick={closeModal}>
							取消
						</Button>
					</Form.Item>
				</Form>
			</Card>
		)
	)
}

export default AddFlowpathModal
